// eslint-disable-next-line no-unused-vars
import VXETable, { Column } from 'vxe-table'
import createBem from '@Components/assets/js/utils/bem'
import { tableNamespace } from '../../../config'
import './index.scss'

const Bem = createBem(`${tableNamespace}__icon`)

VXETable.renderer.add('Icon', {
  renderDefault(h, renderOpts, params) {
    const { row, column } = params

    /**
     * icon: iconfont图标类名; color: public.scss文件中定义的颜色类名;
     * @typedef { { icon: string; color: string; size: 16 | 18; } } Attr
     * @typedef { string | Function | Attr } Prefix
     *
     * @type { {prefix:Prefix;suffix:Prefix} }
     */
    const { options = {} } = renderOpts
    const { prefix, suffix } = options
    /**
     * @param { Prefix } prop
     * @returns { String }
     */
    function getIcon(prop) {
      const type = typeof prop
      if (!['string', 'object', 'function'].includes(type)) return ''
      let temp = prop
      if (typeof temp === 'function') {
        temp = prop({ cellValue: row[column.property], row, column })
      }
      if (typeof temp === 'object') {
        const { icon = '', color = '', size } = temp
        const fontSize = size ? `font-size${parseInt(size)}` : ''
        return `${icon} ${color} ${fontSize}`
      }
      return temp
    }

    return [
      <div class={Bem()}>
        {prefix && row[column.property] && (
          <i class={`iconfont default-icon-color ${getIcon(prefix)}`} />
        )}
        <span class={Bem('text')}>{row[column.property]}</span>
        {suffix && row[column.property] && (
          <i class={`iconfont default-icon-color ${getIcon(suffix)}`} />
        )}
      </div>
    ]
  }
})

/** @type { Column } */
export const options = {
  showOverflow: 'tooltip',
  align: 'left'
}
